<template>
  <div class="statistics">
    <el-form ref="dataForm" class="statistics_nav">
      <div style="height:110px;">
        <span style="margin-left:60px">起始时间：</span>
        <el-date-picker
          v-model="time1"
          type="date"
          placeholder="选择起始时间"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyyMMdd"
        />
        <span style="margin-left:60px">结束时间：</span>
        <el-date-picker
          v-model="time2"
          type="date"
          placeholder="选择结束时间"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyyMMdd"
        />
        <el-button type="primary" round style="margin-left:100px" @click="Search">查询</el-button>
      </div>

    </el-form>
    <!--表一 -->
    <div class="table">
      <table class="tablea">
        <tr>
          <th>当日总费用: {{ statistics.today_amount }}元</th>
          <th>佣金总额: {{ statistics.commission_amount }}元</th>
          <th>送货总次数: {{ statistics.delivery_size }}次</th>
          <th>配送总费用: {{ statistics.delivery_amount }}元</th>
          <th>实际支付总费用: {{ statistics.total_pay_amount }}元</th>
        </tr>
      </table>
    </div>
    <!-- 表二 -->
    <el-table :data="list" style="width: 100%" :border="true" :highlight-current-row="true">
      <el-table-column label="序号" width="80" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper" align="center">
            <span>{{ scope.row.data_id }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="添加时间" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper" align="center">
            <span>{{ scope.row.add_time }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="配送次数" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.delivery_size }}次</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="佣金" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.commission_amount }}元</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="当日费用" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.today_amount }}元</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="实际支付金额" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.total_pay_amount }}元</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-col :span="24" class="toolbar" style="text-align: center;">
      <el-pagination
        background
        :current-page="currentPage"
        :page-count="pageNum"
        :page-size="temp.page_size"
        style="margin-top:30px;margin-bottom:30px"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-col>
  </div>
</template>
<script>
import request from '@/utils/request'
import { Message } from 'element-ui'
import { getToken, getAccount } from '@/utils/auth'
export default {
  data() {
    return {
      statistics: {},
      list: [],
      total: 0,
      time1: '',
      time2: '',
      pageNum: 1,
      currentPage: 1,
      temp: {
        current_page: 1, // 初始页
        page_size: 10, // 当前页面内的列表行数
        end_day: '',
        start_day: ''
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 查询
    Search() {
      this.getList()
    },

    // 获取所有
    getList() {
      if (this.time2) {
        if (this.time1 > this.time2) {
          var time3 = this.time2
          this.time2 = this.time1
          this.time1 = time3
        }
      }
      if (this.time1 === '') {
        this.temp.start_day = '100000000'
      } else {
        this.temp.start_day = this.time1
      }
      if (this.time2 === '') {
        this.temp.end_day = '100000000'
      } else {
        this.temp.end_day = this.time2
      }
      return request({
        url: '/v3/admin/community/data/list',
        method: 'post',
        headers: {
          account_type: getAccount()
        },
        data: this.temp
      }).then(res => {
        this.currentPage = res.current_page
        this.pageNum = res.pages
        this.total = res.total_record
        res.commission_amount = res.commission_amount / 100
        res.delivery_amount = res.delivery_amount / 100
        res.today_amount = res.today_amount / 100
        res.total_pay_amount = res.total_pay_amount / 100
        this.statistics = res
        res.list.map((value, index) => {
          value.commission_amount = value.commission_amount / 100
          value.delivery_amount = value.delivery_amount / 100
          value.today_amount = value.today_amount / 100
          value.total_pay_amount = value.total_pay_amount / 100
        })
        this.list = res.list
      })
    },
    // 当前页
    handleSizeChange: function(pagesize) {
      this.pagesize = pagesize
      this.getList()
    },
    // 换页：更新列表数据
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.statistics {
  margin-top: 60px;
  overflow: hidden;
  .statistics_nav {
    height: 80px;
    width: 100%;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 20px;
  }
  .table {
    width: 100%;
    height: 80px;
    margin-bottom: 30px;
    .tablea {
      width: 100%;
      height: 100%;
      border: 1px solid#ebeef5;
      tr {
        width: 100%;
        height: 50px;
        width: 100%;
        height: 50px;
        line-height: 50px;
        th {
          text-align: center;
          border-right: 0.5px solid #ebeef5;
        }
      }
    }
  }
}
</style>
